<template>
  <div class="home">
    <Avatar></Avatar>
    <PageHeader></PageHeader>
    <img alt="Vue logo"
         src="../assets/logo.png">
    <HelloWorld :msg="message" />
    <!-- 可以使用v-bind动态的传递参数 -->
    <Son :type1="type1"
         :value1="value1"
         @sonMethod="fatherMethod" />
    <br>

    父组件的输入框修改value的值
    <input type="text"
           v-model="value1">
    {{value1}}
    <br>
    <Father></Father>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import Son from '@/components/Son.vue' //这里是声明子组件
import Avatar from '@/components/Avatar'
import PageHeader from '@/components/PageHeader'
import Father from '@/components/Father.vue'
export default {
  name: 'Home',
  data() {
    return {
      type1: ' text',
      value1: '默认的值',
      message: '这是使用动态传递的参数Vue',
    }
  },
  methods: {
    fatherMethod(value) {
      this.value1 = value
    },
  },
  components: {
    HelloWorld,
    Son, //挂载子组件,也可以时候用这种方式来挂载子组件
    //挂子挂载子组件
    // Son1: Son, //挂载子组件
    Avatar,
    PageHeader,
    Father,
  },
}
</script>
